import React, {Component} from 'react'
import {
  View,
  Text,
  StyleSheet,
  Platform,
  TouchableOpacity,
  Alert,
  ActivityIndicator,
  Dimensions
} from 'react-native'
import colors from './../../styles/colors'
import font from './../../styles/font'
import ICON from 'react-native-vector-icons/Ionicons'
import ICON2 from 'react-native-vector-icons/FontAwesome'
import {Actions} from "react-native-router-flux"
import * as WeChat from 'react-native-wechat'
import Toast, {
  DURATION
} from 'react-native-easy-toast'
import { SafeAreaView } from 'react-navigation';
import JPushModule from 'jpush-react-native'

const {
  height: deviceHeight,
  width: deviceWidth
} = Dimensions.get("window");

class LoginScene extends Component{
  constructor(props){
    super(props)
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {
    const {login} = nextProps

    if(this.props.login !== login) {
      if (login.error !== false) {
        this.toast.show(login.error.message)
      }else{
        if (login.isLoading) {
          // TO-DO
        }else {
          setTimeout(()=> {
            Actions.refresh({refresh: true}
          )}, 2000);
          Actions.pop()
          }
        }
      }
    }

  //微信登录
  login(){
    let scope = 'snsapi_userinfo';
    let state = 'faxianjp';
    //判断微信是否安装
    WeChat.isWXAppInstalled()
      .then((isInstalled) => {
        if (isInstalled) {
          //发送授权请求
          WeChat.sendAuthRequest(scope)
            .then(responseCode => {
              //返回code码，通过code获取access_token
              console.log(responseCode.code)
              JPushModule.getRegistrationID(registrationId => {
                console.log(registrationId)
                this.props.actions.login({code: responseCode.code, reg_id: registrationId})
              })


            })
            .catch(err => {
              Alert.alert('登录授权发生错误：', err.message, [
                {text: '确定'}
              ]);
            })
        } else {
          Platform.OS === 'ios' ?
            Alert.alert('没有安装微信', '是否安装微信？', [
              {text: '确定'}
            ]) :
            Alert.alert('没有安装微信', '请先安装微信客户端在进行登录', [
              {text: '确定'}
            ])
        }
      })
  }

  render(){
    return(
      <SafeAreaView style={styles.container}>
        <View style={styles.title}>
          <View></View>
          <Text style={[font.black18]}>登 录</Text>
          <ICON color='#000' size={26} name="md-close" onPress={()=>{Actions.pop()}}/>
        </View>
        <View style={styles.content}>
          <View style={{position:'absolute', width:deviceWidth, height:50, top:200, zIndex: this.props.login.isLoading ? 99 : 0}}>
            <ActivityIndicator
              animating={this.props.login.isLoading}
              size='large'
            />
          </View>
          <ICON name="ios-contact" size={80}/>
          <Text style={{fontSize:12}}>支持微信登录</Text>
          <TouchableOpacity style={styles.WechatLogin} onPress={()=>{
            this.login()
          }}>
            <ICON2 name="weixin" color="#fff" size={20} style={{marginRight:5}}/>
            <Text style={font.white14}>微信登录</Text>
          </TouchableOpacity>
        </View>
        <Toast
          ref={view => this.toast = view}
          style={{backgroundColor:'red'}}
          opacity={0.6}
          position='top'/>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    backgroundColor: '#fff',
    flex: 1,
  },
  title:{
    borderBottomColor:'#f6f6f6',
    borderBottomWidth:1,
    height:40,
    justifyContent:'space-between',
    alignItems:'center',
    paddingHorizontal:10,
    flexDirection:'row'
  },
  content:{
    alignItems:'center',
    flex:1,
    paddingTop:100
  },
  WechatLogin:{
    height:35,
    marginTop:20,
    width:150,
    backgroundColor:'#10b800',
    justifyContent:'center',
    alignItems:'center',
    flexDirection:'row'
  }
})

export const LayoutComponent = LoginScene

export function mapStateToProps(state, props) {
  return {
    routes: state.routes,
    login: state.loginReducer
  }
}